<style lang="scss" scoped>
    @import '../../css/study-plan.scss';
    .main-content{padding: 30px 40px 60px 30px;background: #fff;min-height: 600px;}
    .main-head{background: #fcfdff;text-align: center;color: #aaa;padding: 30px 0;}
    .num-box{color: $mco;font-size: 34px;}
    .com-num{margin-right: 40px;}
    .main-head p{margin-top: 12px;}
    .main-head span{color: #333;}
    .info-main-content{text-align: center;border: 1px solid #eee;margin-top: 30px;}
    .info-main-title{padding: 18px 0;background: #fcfdff;border-bottom: 1px solid #eee;}
    .info-main{padding: 18px 0}

    .sort-box{position: relative;}
    .el-icon-caret-top{position: absolute;right: -15px;top:-3px;color: #999;}
    .el-icon-caret-bottom{position: absolute;right: -15px;bottom:-3px;color: #999;}
</style>

<template>
    <section>
        <div class="breadcrumb-box">
            <el-breadcrumb separator=" > ">
                <el-breadcrumb-item >学习计划</el-breadcrumb-item>
                <el-breadcrumb-item >学习概况</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="main-content">
            <div class="main-head">
                <div class="num-box">{{totalMemberNum==0?'0':parseInt((totalFinishedMemberNum/totalMemberNum)*100)}}%</div>
                <div>完成率</div>
                <p>学习计划分配量 <span class="com-num">{{totalMemberNum}}</span>学习计划完成量 <span>{{totalFinishedMemberNum}}</span></p>
            </div>
            <div class="info-main-content">
                <el-row class="info-main-title">
                    <el-col :span="4"><div class="car-title">学员名字</div></el-col>
                    <el-col :span="4">
                        <div class="car-title">
                            <span class="sort-box">
                                学时
                                <i @click="getList(1,'period')" class="el-icon-caret-top"></i>
                                <i @click="getList(0,'period')" class="el-icon-caret-bottom"></i>
                            </span>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="car-title">
                            <span class="sort-box">
                                分配学习计划
                                <i @click="getList(1,'allotStudyNum')" class="el-icon-caret-top"></i>
                                <i @click="getList(0,'allotStudyNum')" class="el-icon-caret-bottom"></i>
                            </span>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="car-title">
                            <span class="sort-box">
                                完成学习计划
                                <i @click="getList(1,'finishedStudyNum')" class="el-icon-caret-top"></i>
                                <i @click="getList(0,'finishedStudyNum')" class="el-icon-caret-bottom"></i>
                            </span>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="car-title">
                            <span class="sort-box">
                                考试次数
                                <i @click="getList(1,'examNum')" class="el-icon-caret-top"></i>
                                <i @click="getList(0,'examNum')" class="el-icon-caret-bottom"></i>
                            </span>
                        </div>
                    </el-col>
                    <el-col :span="4">
                        <div class="car-title">
                            <span class="sort-box">
                                考试合格数
                                <i @click="getList(1,'examPassNum')" class="el-icon-caret-top"></i>
                                <i @click="getList(0,'examPassNum')" class="el-icon-caret-bottom"></i>
                            </span>
                        </div>
                    </el-col>
                </el-row>
                <template v-for="one in list">
                    <el-row class="info-main">
                        <el-col :span="4">{{one.username}}</el-col>
                        <el-col :span="4">{{one.period}}</el-col>
                        <el-col :span="4">{{one.allotStudyNum}}</el-col>
                        <el-col :span="4">{{one.finishedStudyNum}}</el-col>
                        <el-col :span="4">{{one.examNum}}</el-col>
                        <el-col :span="4">{{one.examPassNum}}</el-col>
                    </el-row>
                </template>
            </div>
            <div class="clearfix" v-show="pageInfo.total>20">
                <el-pagination class="mt20 fr"
                               background
                               @size-change="getList"
                               @current-change="getList"
                               :current-page.sync="pageInfo.page"
                               :page-size="pageInfo.pageSize"
                               layout="prev, pager, next, jumper"
                               :total="pageInfo.total">
                </el-pagination>
            </div>
        </div>
    </section>

</template>

<script>

import qs from 'qs'

export default{
    data: function(){
        return {
            totalMemberNum:'',
            totalFinishedMemberNum:'',
            list:[],
            pageInfo: {
                pageSize: 20,
                total:0,
                page:1
            }
        }
    },
    mixins: [mixinMethods],
    methods: {
        getList(sortNum,fieldType){
            axios.post('/com/study/studyOverviewList', qs.stringify({
                sort:sortNum,
                field:fieldType,
                pagesize:this.pageInfo.pageSize,
                page:this.pageInfo.page
            })).then((res) => {
                var d = res.data;
                if(d.flag == 1){
                    this.list = d.data.Rows;
                    this.totalMemberNum = d.data.TotalStudyNum;
                    this.totalFinishedMemberNum = d.data.TotalStudyFinishedNum;
                    this.pageInfo.total=Number(d.data.Total);
                }else {
                    this.$message.error(d.msg)
                }
            })
        }
    },
    mounted: function(){
        this.getList();
    }
}


</script>